import React from "react";
import './Sign.css'

import {AutoCenter, Button, Form, Input, Modal, NavBar, NoticeBar, Popup, Radio, Space, Steps, Toast} from 'antd-mobile'
import {Step} from "antd-mobile/es/components/steps/step";
import cookie from "_react-cookies@0.1.1@react-cookies";
import moment from "moment";

/**
 * 初始化微信js-sdk
 */
export function jsSdkConfig() {
    //TODO 根据手机类型生成对应url

    //IOS 端需要从根url 中生成
    //ANDROID 需要从本路径下生成



    // let u = window.navigator.userAgent;
    // let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    // let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // //安卓需要使用当前URL进行微信API注册（即当场调用location.href.split('#')[0]）
    // //iOS需要使用进入页面的初始URL进行注册，（即在任何pushstate发生前，调用location.href.split('#')[0]）
    // let url = '';
    // if (isiOS) {
    //     url = encodeURIComponent(`http://www.qq.com/home/index?op=${window.sessionStorage.getItem('option')}`);//获取初始化的url相关参数
    // } else {
    //     url = encodeURIComponent(window.location.href.split('#')[0]);
    // }

    const  timeStap = new Date().getTime().toString().substr(0,10);
    const  path = "http://htjoa.nrnet.cn/dc14/construct/wechat/position?timeStap="+timeStap;

    fetch(path,{method:"GET"})
        .then(res=>res.json())
        .then(result=>{
            window.wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId:'wx150272ef1963f321', // 必填，企业号的唯一标识，此处填写企业号corpid
                timestamp: timeStap, // 必填，生成签名的时间戳（10位）
                nonceStr: 'const', // 必填，生成签名的随机串,注意大小写
                signature: result["signature"],// 必填，签名，见附录1（通过https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 验证）
                jsApiList: [
                    'getLocation',
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        });
}


// 签到签退页面
export default class Sign extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            phone:'',    //电话号
            name:'',                //用户名
            identifyId:'',          //身份证号
            post:'',                //职位

            position:'0.0.0.0',  //位置
            planNumber:0,           //计划号
            planName:'',            //计划名称
            planType:'',            //计划类型
            dayPlan:'',             //日计划
            planDate:'',            //计划时间
            signState: '',          //签到还是签退
            stap:0,                 //步骤数
            bottonPopShow:false,    //底部弹出菜单
            startMark:0,
            signature:'',           //wx JS-SDK 签名
        }
    }

    /**
     * 表单提交函数  通过电话号查询用户  计划号对应的 信息
     * @param values
     */
    onFinish = (values: any) => {
        this.setState({signState:values["inOrOut"]})
        this.setState({planNumber:values["planNumber"]})

        //提取计划信息
        const url ='http://htjoa.nrnet.cn/dc14/construct/plan/plan?planNumber='+this.state.planNumber;
        fetch(url,{method:"GET"
        })
            .then(res=>res.json()).then(result=>{
            if (result["code"]=="200"){
                this.setState({planName:result["name"]})
                this.setState({planType:result["type"]})
                this.setState({dayPlan:result["dayPlan"]})
                this.setState({planDate:result["date"]})


                //提取用户信息
                const url1 ='http://htjoa.nrnet.cn/dc14/construct/user/user?phone='+this.state.phone;
                fetch(url1,{method:"GET"
                })
                    .then(res=>res.json()).then(result=>{
                    if (result["code"]=="200"){
                        this.setState({name:result["name"]})
                        this.setState({identifyId:result["id"]})
                        this.setState({post:result["post"]})
                        this.setState({stap:1})
                        this.setState({ bottonPopShow:true})
                    }
                    else {
                        Toast.show("暂无该用户信息")
                    }
                })
            }
            else {
                Toast.show("请核对计划号")
            }

        })
    }

    /**
     * 提交用户打卡信息
     */
    submitSign=()=>{
        console.log(this.state.planDate.length)
        //保留卡控时间代码
        // if(this.state.planDate.length<11){
        //     console.log(this.state.planDate.length)
        //     Toast.show({
        //         icon: 'fail',
        //         content: '施工调填写时间有误',
        //     })
        // }else {
        //
        //     const url = 'http://htjoa.nrnet.cn/dc14/construct/sign';
        //
        //     const formData = new FormData();
        //     formData.append("phone", this.state.phone);
        //     formData.append("planNumber", this.state.planNumber);
        //     if ("inOrOut", this.state.signState === "签到") {
        //         formData.append("inOrOut", "in");
        //     }
        //     if ("inOrOut", this.state.signState === "签退") {
        //         formData.append("inOrOut", "out");
        //     }
        //
        //     formData.append("position", this.state.position)
        //
        //     console.log(formData)
        //     //TODO 判断时间是否可以签到
        //
        //     //时间转换
        //     //获取当前时间
        //     const nowDataTime = new Date()
        //     console.log("datetime",nowDataTime)
        //
        //     //获取项目开始日期
        //     const signData = moment(this.state.dayPlan).format('YYYY/MM/DD')
        //     //获取项目开始时间
        //     const signStartTime = signData + " " + this.state.planDate.substr(0, 5)
        //     //获取项目结束时间
        //     const signEndTime = signData + " " + this.state.planDate.substr(6, 12)
        //
        //
        //     //转换可签到的时间
        //
        //     const signInStart = new Date(signStartTime)
        //     signInStart.setMinutes(signInStart.getMinutes() - 40)
        //
        //
        //
        //     console.log("signInStart",signInStart )
        //
        //
        //     //转换签到结束时间
        //     const signInEnd = new Date(signStartTime)
        //
        //     console.log("signInEnd",signInEnd)
        //
        //
        //     //转换可签退的时间
        //     const signOutEnd = new Date(signEndTime)
        //     signOutEnd.setMinutes(signOutEnd.getMinutes() + 40)
        //     console.log("signOutStart",signOutEnd)
        //
        //     //转换签到结束时间
        //     const signOutStart = new Date(signEndTime)
        //
        //     console.log("signOutEnd",signOutStart)
        //
        //     if (nowDataTime > signInStart && nowDataTime < signInEnd) {
        //         fetch(url, {
        //             method: "POST",
        //             body: formData
        //         }).then(res => res.json())
        //             .then(result => {
        //                 console.log(result)
        //                 if (result["code"] === "200") {
        //                     this.setState({stap: 2})
        //                     Modal.alert({
        //                         content: this.state.signState + "成功!",
        //                         onConfirm: () => {
        //                             // TODO 跳转回主页
        //                             // Toast.show("返回主页")
        //                             this.props.history.push('/mainpage')
        //                         },
        //                     })
        //                 } else {
        //                     Modal.alert({
        //                         content: "请检查网络!",
        //
        //                     })
        //                 }
        //             })
        //     } else if (nowDataTime > signOutStart && nowDataTime < signOutEnd) {
        //         fetch(url, {
        //             method: "POST",
        //             body: formData
        //         }).then(res => res.json())
        //             .then(result => {
        //                 console.log(result)
        //                 if (result["code"] === "200") {
        //                     this.setState({stap: 2})
        //                     Modal.alert({
        //                         content: this.state.signState + "成功!",
        //                         onConfirm: () => {
        //                             // TODO 跳转回主页
        //                             // Toast.show("返回主页")
        //                             this.props.history.push('/mainpage')
        //                         },
        //                     })
        //                 } else {
        //                     Modal.alert({
        //                         content: "请检查网络!",
        //
        //                     })
        //                 }
        //             })
        //     } else {
        //         Toast.show({
        //             icon: 'fail',
        //             content: '非可打卡时间',
        //         })
        //     }

            const url = 'http://htjoa.nrnet.cn/dc14/construct/sign';

            const formData = new FormData();
            formData.append("phone", this.state.phone);
            formData.append("planNumber", this.state.planNumber);
            if ("inOrOut", this.state.signState === "签到") {
                formData.append("inOrOut", "in");
            }
            if ("inOrOut", this.state.signState === "签退") {
                formData.append("inOrOut", "out");
            }

            formData.append("position", cookie.load("position"))


            //TODO 判断用户是否获取到了POSITION未获取到的提示无法签到


            console.log(formData)

                fetch(url, {
                    method: "POST",
                    body: formData
                }).then(res => res.json())
                    .then(result => {
                        console.log(result)
                        if (result["code"] === "200") {
                            this.setState({stap: 2})
                            Modal.alert({
                                content: this.state.signState + "成功!",
                                onConfirm: () => {
                                    // TODO 跳转回主页
                                    // Toast.show("返回主页")
                                    this.props.history.push('/mainpage')
                                },
                            })
                        } else {
                            Modal.alert({
                                content: "请检查网络!",

                            })
                        }
                    })

    }
    componentDidMount() {

        jsSdkConfig();


       window.wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                const latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                const longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                console.log(longitude,latitude)
                cookie.save("position",longitude+","+latitude);
                const speed = res.speed; // 速度，以米/每秒计
                const accuracy = res.accuracy; // 位置精度
            }
        });

        console.log(new Date().getTime().toString().substr(0,10))
        this.setState({phone:cookie.load("phone")})
        document.title='签到签退'

    }

    render() {
        return (
            <div>
                {/*<NavBar className='signNavBar' >*/}
                {/*    打卡*/}
                {/*</NavBar>*/}


                <NoticeBar content='打卡时间为施工计划开始前的40分钟,结束后的40分钟' color='info' />
                <Steps current={this.state.stap}>
                    <Step title='1. 填写计划编号'  />
                    <Step title='2. 提取信息' description='请仔细验证' />
                    <Step title='3. 提交打卡'  />
                </Steps>
                <Form
                    onFinish={this.onFinish}
                    layout='horizontal'
                    footer={
                        <Button block type='submit' color='primary' size='large'>
                            提取信息
                        </Button>
                    }
                    className='signForm'>

                    {/*<Form.Header>提取信息:</Form.Header>*/}
                    <Form.Item
                        name='inOrOut'
                        rules={[{required: true, message: '请选择打卡类型'}]}
                    >
                        <Radio.Group>
                            <AutoCenter>
                                <Space style={{'--gap': '24px'}}>
                                    <Radio value='签到'>签到</Radio>
                                    <Radio value='签退'>签退</Radio>
                                </Space>
                            </AutoCenter>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        name='planNumber'
                        label="计划编号"
                        rules={[{required: true, message: '请填写计划编号'}]}
                    >
                        <Input placeholder='请输入计划号' clearable/>
                    </Form.Item>
                </Form>
                <AutoCenter>
                    IOS 客户端请在企业微信中打卡（暂不支持手机微信）
                </AutoCenter>
                <>
                    <Popup
                        visible={this.state.bottonPopShow}
                        onMaskClick={() => {
                                this.setState({bottonPopShow:false})
                        }}
                        bodyStyle={{ minHeight: '70vh' }}
                    >


                        <div style={{padding:"12px", fontSize:"large"}}>
                            <p>计划号:   {this.state.planNumber}</p>
                            <p>项目名称:   {this.state.planName}</p>
                            <p>项目备注:   {this.state.planType}</p>
                            <p>计划日期:   {this.state.dayPlan}</p>
                            <p>施工时间:   {this.state.planDate}</p>
                            <p>状态:  {this.state.signState}</p>
                            <p>姓名:   {this.state.name}</p>
                            <p>电话号: {this.state.phone}</p>
                            {/*<p>身份证:   {this.state.identifyId}</p>*/}
                            <p>岗位:   {this.state.post}</p>
                            <Button block className='signButton'  color='primary ' size='large' style={{marginTop:"20px"}}
                            onClick={this.submitSign}>
                                提交
                            </Button>
                        </div>
                    </Popup>
                </>









            </div>
        )
    }
}